<template>
	<div class="">
		<div class="">
			<el-row style="margin:26px 0 0;">
				<el-col :span="24">
					<el-form :inline="true" :model="formInline">
						<el-form-item label="促销机编号"><el-input v-model="formInline.proId" placeholder="请输入促销机编号"></el-input></el-form-item>
						<el-form-item label="机主编号"><el-input v-model="formInline.proMasterUserPhone" placeholder="请输入机主手机号"></el-input></el-form-item>
						<br />
						<el-form-item label="促销机类型">
							<el-select v-model="formInline.proType" style="width: 190px;">
								<el-option label="全部" value=""></el-option>
								<el-option label="有人机" value="1"></el-option>
								<el-option label="无人机A" value="2"></el-option>
								<el-option label="无人机B" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="是否分红">
							<el-select v-model="formInline.proIsflag" style="width: 150px;">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="促销机状态">
							<el-select v-model="formInline.proStatus" style="width: 150px;">
								<el-option label="正常" value="1"></el-option>
								<el-option label="异常" value="0"></el-option>
								<el-option label="未布点" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-button type="primary" @click="fetchData(1)">查询</el-button>
						<el-button type="primary" @click="addMachine()">新增促销机</el-button>
					</el-form>
				</el-col>
			</el-row>
		</div>
		
		
		
		<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe style="width: 100%">
			<el-table-column prop="proId" label="促销机编号" width="150"></el-table-column>
			<el-table-column label="促销机类型">
				<template scope="scope">
					<!-- <span>{{ scope.row.proType == 1 ? '有人机' : '无人机' }}</span> -->
					<span v-if="scope.row.proType == 1">有人机</span>
					<span v-else-if="scope.row.proType == 2">无人机A</span>
					<span v-else>无人机B</span>
					
				</template>
			</el-table-column>
			<el-table-column prop="proAddress" label="促销机地址" width="250"></el-table-column>
			<el-table-column prop="proArrangementUserid" label="布点员工姓名"></el-table-column>
			<el-table-column prop="proMasterUserName" label="促销机所属用户姓名" width="200"></el-table-column>

			<el-table-column label="促销机状态">
				<template scope="scope">
					<span v-if="scope.row.proStatus == 1">正常</span>
					<span v-else-if="scope.row.proStatus == 0">异常</span>
					<span v-else>未布点</span>
				</template>
			</el-table-column>
			<el-table-column label="押金是否已经分红 ">
				<template scope="scope">
					<span>{{ scope.row.proIsflag == 1 ? '已分红' : '未分红' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="220">
				<template scope="scope">
					<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
					<el-button type="success" size="small" v-if="scope.row.proIsflag == 0" @click="abonus(scope.row)">分红</el-button>
					<el-button type="danger" size="small" @click="deleteMachine(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="paginate">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-size="pageInfo.pageSize"
				layout="total, prev, pager, next, jumper"
				:total="pageInfo.count"
			></el-pagination>
		</div>

		<!--新增和修改弹窗-->
		<el-dialog title="新增/编辑促销机" v-model="dialogFormVisible" :before-close="dialogHandleClose">
			<el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="ed-form ed-box" style="width: 800px;">
				<el-form-item label="促销机编号" prop="proId" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.proId" :disabled="!upStuts" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="促销机类型" :label-width="formLabelWidth">
					<el-select v-model="ruleForm.proType" style="width: 250px;">
						<el-option label="有人机" value="1"></el-option>
						<el-option label="无人机A" value="2"></el-option>
						<el-option label="无人机B" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="机主验证" prop="PHONE" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.PHONE" :maxlength="11" placeholder="请输入11位手机号" style="width: 250px;">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
					<!-- <span>{{ ruleForm.proMasterUserid }}</span> -->
					<span style="color: #20a0ff;font-size: 11px;" v-if="userphone1==1">
						<i class="el-icon-check">是平台用户</i>
					</span>
					<span style="color: #f56c6c;font-size: 11px;" v-if="userphone1==2">
						<i class="el-icon-close"> 不是平台用户，重新输入</i>
					</span>
				</el-form-item>
				<!-- <el-form-item label="促销机所属用户userid" :label-width="formLabelWidth">
				    <el-input disabled v-model="ruleForm.proMasterUserid" style="width: 250px;"></el-input>
				</el-form-item> -->
				<el-form-item label="促销机状态" :label-width="formLabelWidth">
					<el-select v-model="ruleForm.proStatus" style="width: 250px;">
						<el-option label="正常" value="1"></el-option>
						<el-option label="异常" value="0"></el-option>
						<el-option label="未布点" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否分红" :label-width="formLabelWidth" v-if="upStuts">
					<el-radio-group v-model="ruleForm.proIsflag">
						<el-radio label="1">是</el-radio>
						<el-radio label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<div style="width: 400px;" v-if="ruleForm.proIsflag != 1 && upStuts"></div>
				
				<el-form-item label="管理员验证" :label-width="formLabelWidth" v-if="ruleForm.proIsflag == 1 && upStuts">
					<el-input v-model="managePhone" :maxlength="11" placeholder="请输入11位手机号" style="width: 250px;"></el-input>
					<span style="color: #20a0ff;font-size: 11px;" v-if="userphone2==1">
						<i class="el-icon-check">是平台用户</i>
					</span>
					<span style="color: #f56c6c;font-size: 11px;" v-if="userphone2==2">
						<i class="el-icon-close"> 不是平台用户，重新输入</i>
					</span>
				</el-form-item>
				<el-form-item label="城市编码" prop="cityCode" :label-width="formLabelWidth">
					<!-- <el-input v-model="ruleForm.cityCode" style="width: 250px;"></el-input> -->
					<el-cascader
					    v-model="ruleForm.cityCodeed"
					    :options="options"
					    :props="{ expandTrigger: 'hover' }"
					    @change="handleChange"
						style="width: 250px;"></el-cascader>
				</el-form-item>
				<el-form-item label="促销机地址" prop="proAddress" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.proAddress"  style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="经度" prop="proAccu" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.proAccu" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="纬度" prop="proDime" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.proDime" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="商铺名称" prop="shopsName" :label-width="formLabelWidth" v-if="ruleForm.proType==1">
					<el-input v-model="ruleForm.shopsName" style="width: 250px;"></el-input>
				</el-form-item>
				<!-- <el-form-item label="店铺老板身份证号" prop="proStoreIdcard" :label-width="formLabelWidth" v-if="ruleForm.proType==1">
					<el-input v-model="ruleForm.proStoreIdcard" style="width: 250px;"></el-input>
				</el-form-item> -->
				<el-form-item label="铺柜日期" prop="jionDate" :label-width="formLabelWidth">
					<el-date-picker
						v-model="ruleForm.jionDate"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd"
						style="width: 250px;">
					</el-date-picker >
				</el-form-item>
				<el-form-item label="布点员工手机" prop="proArrangementUserphone" :label-width="formLabelWidth">
					<el-input v-model="ruleForm.proArrangementUserphone" :maxlength="11" placeholder="请输入11位手机号" style="width: 250px;">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
					<!-- <span>{{ ruleForm.proMasterUserid }}</span> -->
					<span style="color: #20a0ff;font-size: 11px;" v-if="userphone3==1">
						<i class="el-icon-check">是平台用户</i>
					</span>
					<span style="color: #f56c6c;font-size: 11px;" v-if="userphone3==2">
						<i class="el-icon-close"> 不是平台用户，重新输入</i>
					</span>
				</el-form-item>
				<el-form-item label="场地图片(正面)" prop="proPositiveImg"  style="display: flex;align-items: center;margin-left: 10px;">
					<we-ui-uploads :images="ruleForm.proPositiveImg" :maxCount="1" :maxSize="1024 * 10240" @uploading="uploading"></we-ui-uploads>
				</el-form-item>
				
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogHandleClose">取 消</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">提 交</el-button>
			</div>
		</el-dialog>
		<!-- 列表点击分红弹窗 -->
		<el-dialog
		  title="团队领导人分红"
		  :visible.sync="FHdialogVisible"
		  width="10%"
		  :before-close="adhandleClose">
		  <div class="fhbox">
		  	<div class="tit">团队领导人验证</div>
			<el-input v-model="managePhone" :maxlength="11" placeholder="请输入11位手机号" style="width: 250px;"></el-input>
			<!-- <span>{{ manageID }}</span> -->
			<span style="color: #20a0ff;font-size: 11px;" v-if="userphone2==1">
				<i class="el-icon-check">是平台用户</i>
			</span>
			<span style="color: #f56c6c;font-size: 11px;" v-if="userphone2==2">
				<i class="el-icon-close"> 不是平台用户，重新输入</i>
			</span>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="adhandleClose">取 消</el-button>
		    <el-button type="primary" @click="sureFH()">确 定</el-button>
		  </span>
		</el-dialog>
		
		
	</div>
</template>

<script>
import {cityDataes} from "../../addAddress.js";
export default {
	name: 'machineManagement',
	data() {
		return {
			table_loading: true,
			loading: false,  
			formInline: {
				proId: '',
				proMasterUserPhone: '',
				proType: '',
				proStatus: '',
				proIsflag: '',
				pageNum: 1,
				pageSize: 10,
				isAsc: 'desc',
				orderByColumn: 'id'
			},
			restaurants1: [],
			restaurants2: [],
			pageInfo: {
				pageNum: 1,
				pageSize: 10,
				count: 1,
				dtos: []
			},
			dialogFormVisible: false,
			formLabelWidth: '130px',
			options:[],
			ruleForm: {
				proId: '',
				proType: '1',//促销机类型
				proMasterUserid: '',
				PHONE: '',
				proIsflag: '0',
				proStatus: '2',
				id: '',
				proAddress:'',//促销机地址
				proAccu:'',//经度
				proDime:'',//纬度
				shopsName:'',// 商铺名称
				proStoreIdcard:'',//店铺老板身份证号
				cityCode:'',//城市编码
				cityCodeed:[],//城市编码test
				cityCodeFull:'',//城市编码全部
				jionDate:'',
				proPositiveImg: [],
				proArrangementUserphone:'',
				proArrangementUserid:''
			},
			rules: {
				proId: [{ required: true, message: '请输入促销机编号', trigger: 'blur' }],
				PHONE: [{ required: true, message: '请输入机主手机号验证', trigger: 'blur' }],
				proAddress: [{ required: true, message: '请输入促销机地址', trigger: 'blur' }],
				proAccu: [{ required: true, message: '请输入促销机经度', trigger: 'blur' }],
				proDime: [{ required: true, message: '请输入促销机纬度', trigger: 'blur' }],
				cityCode: [{ required: true, message: '请选择促销机城市编码', trigger: 'blur' }],
				jionDate: [{ required: true, message: '请选择铺柜日期', trigger: 'blur' }],
				proArrangementUserphone: [{ required: true, message: '请输入布点员手机号验证', trigger: 'blur' }],
			},
			upStuts: true,
			managePhone: '',
			manageID: '',
			FHdialogVisible:false,
			FHupdata:{},//分红上传数据储存
			userphone1:0,
			userphone2:0,
			userphone3:0,
			
			// loading: false,
		};
	},
	created() {
		// this.initializationTime();
	},
	mounted() {
		this.chishiaddress();
		// 促销机编号和机主编号初始化
		this.fetchData(this.pageInfo.pageNum);
	},
	watch: {
		'ruleForm.PHONE': {
			handler: function(value) {
				// console.log(value);
				if (value.length == 11) {
					this.checkPhone1(value);
				} else {
					this.ruleForm.proMasterUserid = '';
					this.userphone1=0;
				}
			},
			deep: true
		},
		'ruleForm.proArrangementUserphone': {
			handler: function(values) {
				// console.log(value);
				if (values.length == 11) {
					this.checkPhone3(values);
				} else {
					this.ruleForm.proArrangementUserid = '';
					this.userphone3=0;
				}
			},
			deep: true
		},
		'ruleForm.jionDate': {
			handler: function(value) {
				let d = new Date(value);
				this.ruleForm.jionDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
			},
			deep: true
		},
		managePhone(values) {
			console.log(values);
			if (values.length == 11) {
				this.checkPhone2(values);
			} else {
				this.manageID = '';
				this.userphone2=0;
			}
		}
	},
	methods: {
		chishiaddress(){
			// console.log(cityDataes.cityData)
			this.options=cityDataes.cityData;
		},
		handleChange(value) {
			console.log(value);
			this.ruleForm.cityCodeFull=value.toString();
			this.ruleForm.cityCode=value[2];
			// console.log(this.ruleForm.cityCodeFull);
			// console.log(this.ruleForm.cityCode);
		},
		fetchData(page = 1) {
			this.table_loading = true;
			this.pageInfo.pageNum = page;
			this.formInline.pageNum = page;
			console.log('上传的参数', this.formInline);
			this.$http.get('/devapi/proMachineInfo/list', this.formInline).then(res => {
				console.log('表格数据======', res);
				this.table_loading = false;
				if (res.code == 200) {
					let data = JSON.parse(JSON.stringify(res));
					this.pageInfo.dtos = data.rows;
					this.pageInfo.count = data.total;
				}
			});
		},
		addMachine() {
			this.dialogFormVisible = true;
			this.upStuts = true;
		},
		checkPhone1(number) {
			let dataes = {
				PHONE: number
			};
			this.$http.get('/devapi/userInfo/list', dataes).then(res => {
				// console.log('返回的数据======', res);
				if (res.code == 200) {
					if (res.rows.length > 0) {
						this.ruleForm.proMasterUserid = res.rows[0].userId;
						this.userphone1=1;
					}else{
						this.userphone1=2;
					}
				}
			});
		},
		checkPhone2(numbers) {
			let dataeses = {
				PHONE: numbers
			};
			this.$http.get('/devapi/userInfo/list', dataeses).then(res => {
				// console.log('管理员手机验证======', res);
				if (res.code == 200) {
					if (res.rows.length > 0) {
						this.manageID = res.rows[0].userId;
						this.userphone2=1;
					}else{
						this.userphone2=2;
					}
				}
			});
		},
		checkPhone3(number) {
			let dataes = {
				PHONE: number
			};
			this.$http.get('/devapi/userInfo/list', dataes).then(res => {
				// console.log('返回的数据======', res);
				if (res.code == 200) {
					if (res.rows.length > 0) {
						this.ruleForm.proArrangementUserid = res.rows[0].userId;
						this.userphone3=1;
					}else{
						this.userphone3=2;
					}
				}
			});
		},
		// 分页部分
		handleCurrentChange(val) {
			this.fetchData(val);
		},
		edit(rowitem) {
			console.log(rowitem);
			this.dialogFormVisible = true;
			this.ruleForm = {
				proId: rowitem.proId,
				proType: rowitem.proType,
				proMasterUserid: rowitem.proMasterUserid,
				PHONE: rowitem.proMasterUserPhone,
				proIsflag: rowitem.proIsflag,
				proStatus: rowitem.proStatus,
				ID: rowitem.id,
				proAddress:rowitem.proAddress,//促销机地址
				proAccu:rowitem.proAccu.toString(),//经度
				proDime:rowitem.proDime.toString(),//纬度
				shopsName:rowitem.shopsName,// 商铺名称
				proStoreIdcard:rowitem.proStoreIdcard,//店铺老板身份证号
				cityCode:rowitem.cityCode,//城市编码
				// cityCodeed: rowitem.cityCodeFull.split(","),//城市编码
				jionDate:new Date(rowitem.jionDate),
				proPositiveImg: [rowitem.proPositiveImg],
			};
			// console.log(this.ruleForm.cityCodeed);
			if(rowitem.cityCodeFull==null){
				this.ruleForm.cityCodeed='';
			}else{
				this.ruleForm.cityCodeed=rowitem.cityCodeFull.split(",");
			}
			this.upStuts = false;
		},
		deleteMachine(itemes) {
			// console.log(itemes);
			let ids = itemes.id;
			this.$confirm('此操作将确定删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.deletefn('/devapi/proMachineInfo/' + ids).then(res => {
						// console.log('删除返回的....', res);
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: res.msg
							});
							this.fetchData(1);
						}
					});
				})
				.catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消'
					// });
				});
		},
		abonus(itemess) {
			// console.log(itemess);
			this.FHdialogVisible=true;
			this.FHupdata=itemess;
			// console.log(this.FHupdata);
			// this.$confirm('此操作将进行促销机分红, 是否继续?', '提示', {
			//           confirmButtonText: '确定',
			//           cancelButtonText: '取消',
			//           type: 'warning'
			//         }).then(() => {
			//           this.sureFH()
			//         }).catch(() => {
			// 			this.FHupdata={},
			// 			  this.$message({
			// 				type: 'info',
			// 				message: '已取消分红'
			// 			  });
			//         });
		},
		sureFH(){
			let storeTypees;
			if (this.FHupdata.proType == '1') {
				storeTypees = '9';
			} else if (this.FHupdata.proType == '2' || this.FHupdata.proType == '3') {
				storeTypees = '10';
			}
			this.submitfenH( storeTypees, this.FHupdata.proMasterUserid,this.manageID);
		},
		submitfenH(type, uid,mid) {
			// console.log('分红上传的三个参数',type,uid)
			if(!mid){
				return
			}
			this.dataApi.ajax(
				'handlePromotionInfo',
				{
					managerUserId: mid,
					storeType: type,
					proMasterUserid: uid
				},
				res => {
					// console.log('分红结果', res);
					if(res.responseType=='S'){
						this.$message({
							type: 'success',
							message: '操作成功！'
						});
						let editurleses =
							'/devapi/proMachineInfo?proIsflag=1' +
							'&ID=' +
							this.FHupdata.id;
						// console.log('编辑的请求参数', editurleses);
						this.$http.put(editurleses).then(res => {
							if (res.code == 200) {
								// console.log('分红成功编辑返回的', res);
								this.fetchData(1);
								// this.adhandleClose()
							}
						});
						this.adhandleClose()
					}else{
						let editurles =
							'/devapi/proMachineInfo?proIsflag=0' +
							'&ID=' +
							this.FHupdata.id;
						// console.log('编辑的请求参数', editurles);
						this.$http.put(editurles).then(res => {
							if (res.code == 200) {
								// console.log('分红失败编辑返回的', res);
								this.fetchData(1);
								// this.adhandleClose()
							}
						});
					}
					
				}
			);
		},
		submitForm(formName) {
			
			if(!this.ruleForm.proMasterUserid){
				this.$message.error('请输入有效的机主！');
				return
			}
			// if(this.ruleForm.proIsflag=='1'){
			// 	if(!this.manageID){
			// 		this.$message.error('请输入有效的管理员！');
			// 		return
			// 	} 
			// }
			if (this.ruleForm.proPositiveImg == '') {
			  this.showMsg('请上传图片', 'warning');
			  return;
			}
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true; //提交动画
					if (this.upStuts) {
						// 促销机新增
						console.log('新增上传的',this.ruleForm)
						this.$http.post('/devapi/proMachineInfo',this.ruleForm).then(res => {
							// console.log('上传返回的数据======', res);
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: res.msg
								});
								if (this.ruleForm.proIsflag == '1') {
									let storeType;
									if (this.ruleForm.proType == '1') {
										storeType = '9';
									} else if (this.ruleForm.proType == '2' || this.ruleForm.proType == '3') {
										storeType = '10';
									}
									this.FHupdata.id=res.data.id;
									this.submitfenH(storeType, this.ruleForm.proMasterUserid,this.manageID);
								}
								this.fetchData(1);
								this.dialogHandleClose();
							}
						});
					} else {
						// 促销机编辑
						// console.log('编辑的请求参数', this.ruleForm);
						this.$http.put('/devapi/proMachineInfo',this.ruleForm).then(res => {
							// console.log('编辑返回的....', res);
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: res.msg
								});
								this.fetchData(1);
								this.dialogHandleClose();
							}
						});
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		dialogHandleClose() {
			this.ruleForm = {
				proId: '',
				proType: '1',
				proMasterUserid: '',
				PHONE: '',
				proIsflag: '0',
				proStatus: '2',
				proAddress:'',//促销机地址
				proAccu:'',//经度
				proDime:'',//纬度
				shopsName:'',// 商铺名称
				proStoreIdcard:'',//店铺老板身份证号
				cityCode:'',//城市编码
				jionDate:'',
				proPositiveImg: [],
			};
			this.managePhone='';this.manageID='';
			this.dialogFormVisible = false;
			this.loading = false; //提交动画
		},
		adhandleClose(){
			this.managePhone='';this.manageID='';
			this.FHupdata='';
			this.FHdialogVisible = false;
		},
		uploading(f) {
		  this.loading = true;
		  this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
		    // console.log(res)
		    if (res.responseType == 'S') {
		      f.images.splice(f.index, 1, res.filePath);
		      this.loading = false;
			  // console.log('图片的路径是：',this.ruleForm.proPositiveImg)
		    }
		  });
		},
		
		
	}
};
</script>

<style scoped>
	.fhbox{
		display: flex;
		align-items: center;
		
	}
	.tit{ 
		text-align: center;
		margin-right: 20px;
	}
	.ed-box{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
</style>
